<template>
	<MyPage title="瑞安国企资产小程序—瑞安国企资产e租" :isBack="false">
		<view class="login-container">
			<!-- 中间内容区域 -->
			<view class="content">
				<image class="logo-image" src="/static/images/login_logo.png" mode="aspectFit"></image>
				<view class="slogan">
					<text class="slogan-text">地图找房，轻松租房</text>
				</view>
				<view class="sub-slogan">
					<text class="sub-slogan-text">就来瑞安国企资产小程序—瑞安国企资产e租</text>
				</view>
			</view>
			
			<!-- 底部按钮区域 -->
			<view class="footer">
				<button class="login-btn" type="primary" @click="handleLogin">手机号一键登录/注册</button>
				<button class="cancel-btn" @click="handleCancel">取消</button>
			</view>
		</view>
	</MyPage>
</template>

<script setup>
import { ref } from 'vue';
import MyPage from '@/components/MyPage.vue';

// 登录方法
const handleLogin = () => {
	// 这里添加登录逻辑
	uni.showToast({
		title: '正在登录...',
		icon: 'loading'
	});
};

// 取消方法
const handleCancel = () => {
	// 可以返回上一页或关闭当前页面
	uni.navigateBack();
};
</script>

<style lang="scss">
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 94vh;
	background: linear-gradient(to bottom, #2979ff, #1565C0);
	padding: 0 30rpx;
	
	.content {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.logo-image {
			width: 450rpx;
			height: 320rpx;
			margin-bottom: 30rpx;
		}
		
		.slogan {
			margin-bottom: 20rpx;
			.slogan-text {
				color: #ffffff;
				font-size: 48rpx;
				font-weight: bold;
			}
		}
		
		.sub-slogan {
			.sub-slogan-text {
				color: rgba(255, 255, 255, 0.6);
				font-size: 32rpx;
			}
		}
	}
	
	.footer {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)); // 兼容 iOS11 以下
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); // 兼容 iOS11
		margin-top: 80rpx;
		.login-btn {
			background-color: #ffffff;
			color: rgba(0, 36, 87, 1);
			border-radius: 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}
		
		.cancel-btn {
			background-color: rgba(255, 255, 255, 0.2);
			color: #ffffff;
			border: none;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 40rpx;
			
			&::after {
				border: none;
			}
		}
	}
}
</style>